<template>
	<view class="address-manage-wrapper">
		<view class="address-search">
			<!-- <uni-search-bar @confirm="search" :focus="true" v-model="name" @blur="blur" @focus="focus" @input="input"
							@cancel="cancel" @clear="clear">
						</uni-search-bar>
	 -->
			
		</view>
		
		<view class="address-list-container">
			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item
					v-for="(item, index) in addressList"
					:right-options="options"
					:key="item.id"
					@change="swipeChange($event, index)"
					@click="swipeClick($event, index)" class="b-b-1"
				>
					<view class="content-box" >
						<view class="address-item">
							<view class="address-phone-name" @click="selectHandle(item)">
								<text>{{item.names}}</text>
								<text>{{item.phone}}</text>
							</view>
							<view class="address-info flex-c-s" style="align-items: flex-start;">
								<view  @click="selectHandle(item)">{{item.Province}} {{item.city}} {{item.prefecture}} {{item.street}}</view>
								<view class="flex-c" style="width: 150rpx; justify-content: flex-end;">
									<!-- <text v-if="item.defaultFlag === 1" class="color-theme fz26 mr15">默认</text> -->
									<image v-if="item.defaultFlag === 1" class="mr20" src="/static/images/select.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
									<uni-icons type="compose" size="24" color="#409EFF" @click="editAddress(item)"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			
			<NoData v-show="!addressList.length" />
			<u-loadmore v-show="addressList.length" :status="statusText" marginTop="20" :loading-text="loadingText"
			        :loadmore-text="loadmoreText"  :nomore-text="nomoreText" line />
		</view>
		
		<view class="add-address" @click="addAddress">
			+ 新增收货地址
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, computed } from 'vue'
import { onShow, onReachBottom, onLoad } from '@dcloudio/uni-app'
import { getAllAddress, delAddress } from '@/http/my'
import NoData from '@/components/NoData.vue'

interface IAddress {
	id: number
	"names": string,
	"phone": string,
	"Province": string,
	"city": string,
	"prefecture": string,
	"street": string,
	"defaultFlag": number
	detailAddress: string
}

export default defineComponent({
	components: { NoData },
	setup() {
		const statusBarHeight = ref(24)
		const state = reactive({
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
			show: false,
			isOpened: 'none',
			total: 0,
			page: 1,
			pageSize: 10,
			addressList: [] as Array<IAddress>,
			options: [{
				text: '删除',
				style: {
					backgroundColor: '#f53b3e'
				}
			}],
			select: 0
		})
		onShow(() => {
			state.addressList = []
			state.page = 1
			getAllLocation()
		})
		onLoad((option: any) => {
			if(option.select) {
				state.select = option.select || 0 
			}
		})
		
		onReachBottom(() => { // 页面触底事件
			if(state.total === 0) return;
			if(state.total === state.addressList.length) return;
			state.page ++
			getAllLocation()  
		})
		
		const statusText = computed(() => {
			return state.total === state.addressList.length ? 'nomore' : 'loadmore'
		})
		
		const getAllLocation = async () => {
			let res = await getAllAddress({
				page: state.page,
				pageSzie: state.pageSize
			})
			state.addressList = [...state.addressList,...(res.data?.list || [])];
			state.total = res.data?.total || 0
		}
		const setOpened = () => {
			if (state.isOpened === 'none') {
				state.isOpened = 'left';
				return;
			}
			if (state.isOpened === 'left') {
				state.isOpened = 'right';
				return;
			}
			if (state.isOpened === 'right') {
				state.isOpened = 'none';
				return;
			}
		}
		const contentClick = () => { 
			uni.showToast({
				title:'点击内容',
				icon:'none'
			})
		}
		const bindClick = (e: any) => { 
			uni.showToast({
				title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
				icon: 'none'
			});
		}
		const change = (e: any) => {
			state.isOpened = e; 
		}
		const swipeChange = (e: any, index: number) => {
			// console.log('返回：', e);
			// console.log('当前索引：', index, 99);
		}
		const swipeClick = (e: any, index: number) => {
			let { content } = e; 
			if (content.text === '删除') {
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: res => {
						if (res.confirm) {
							let id = state.addressList[index].id; 
							id && deleteLocation(id)
						} else if (res.cancel) {
							
						}
					}
				});
			}
			
		}
		
		const deleteLocation = async (id: number) => {
			let res = await delAddress(id)
			if(res.code === 0) {
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
				state.page = 1
				state.addressList = []
				getAllLocation()
			} else {
				uni.showToast({
					title: '删除失败',
					icon: 'error'
				})
			}
		}
		
		const addAddress = () => {
			uni.navigateTo({
				url: '/pages/myPackge/addressManage/addAddress'
			})
		}
		
		const editAddress = (obj: IAddress) => {
			uni.navigateTo({
				url: `/pages/myPackge/addressManage/addAddress?obj=${JSON.stringify(obj)}`
			})
		}
		
		const selectHandle = (obj: IAddress) => {
			if(state.select) {
				uni.$emit('updateLocation',{id: obj.id})
				uni.navigateBack()
			}
		}
		return {
			swipeClick,
			swipeChange,
			change,
			bindClick,
			contentClick,
			setOpened,
			statusBarHeight,
			addAddress,
			statusText,
			editAddress,
			selectHandle,
			...toRefs(state)
		}
	}
})
</script>

<style> page { background-color: #f8f8fa;}</style>

<style lang="scss" scoped>
.address-manage-wrapper{
	padding-bottom: 150rpx;
	.address-list-container{
		.content-box {
			flex: 1;
			/* #ifdef APP-NVUE */
			justify-content: center;
			/* #endif */  
			padding: 24rpx;
			position: relative;
			background-color: #fff;
			border-bottom-color: #f5f5f5;
			border-bottom-width: 1rpx;
			border-bottom-style: solid;
			background-color: #fff; 
			.address-phone-name{  
				font-size: 30rpx; 
				font-weight: 500; 
				color: #333333; 
				margin-bottom: 18rpx;
				&:first-child text{
					padding-right: 20rpx;
				}
			}
			.address-info{
				font-size: 26rpx; 
				color: #666666;
			}
		}
	}
	.add-address{
		width: 702rpx;
		height: 84rpx;
		background: #eb5480;
		border-radius: 41rpx;
		position: fixed;
		bottom: 60rpx;
		left: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 84rpx;
		font-size: 30rpx;
	}
}
	

	
</style>

